<template>
	<div class="chain" style="height: 100%">
		<el-row type="flex" class="row">
			<el-col>
				<el-card class="cb" shadow="always">
					<div class="box">
						<div class="img">
							<img src="@/static/imgs/chain/chain-block.png" alt="区块" />
						</div>
						<div class="title">
							<span>{{ transationTotal.blockNumber }}</span>
							<span>区块数量</span>
						</div>
					</div>
				</el-card>
			</el-col>
			<el-col>
				<el-card class="node" shadow="always">
					<div class="box">
						<div class="img">
							<img src="@/static/imgs/chain/node.png" alt="节点" />
						</div>
						<div class="title">
							<span>{{ transationTotal.nodeTotal }}</span>
							<span>节点数量</span>
						</div>
					</div>
				</el-card>
			</el-col>
			<el-col>
				<el-card class="tx" shadow="always">
					<div class="box">
						<div class="img">
							<img src="@/static/imgs/chain/tx.png" alt="交易" />
						</div>
						<div class="title">
							<span>{{ transationTotal.txSum }}</span>
							<span>交易数量</span>
						</div>
					</div>
				</el-card>
			</el-col>
			<el-col>
				<el-card class="pend-tx" shadow="always">
					<div class="box">
						<div class="img">
							<img src="@/static/imgs/chain/pend-tx.png" alt="待交易" />
						</div>
						<div class="title">
							<span>{{ transationTotal.pendTxSum }}</span>
							<span>待交易数量</span>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<el-row class="row">
			<el-table :data="nodeList" border style="width: 100%">
				<el-table-column show-overflow-tooltip prop="nodeId" label="节点ID" align="center">
				</el-table-column>
				<el-table-column prop="blockNumber" label="块高" align="center"> </el-table-column>
				<el-table-column prop="pbftView" label="pbftView" align="center"> </el-table-column>
				<el-table-column prop="status" label="状态" align="center">
					<template slot-scope="scope">
						<el-tag
							effect="dark"
							:type="commColor[scope.row.status == '1' ? '0' : '1']"
						>
							{{ nodeStatus[scope.row.status] }}
						</el-tag>
					</template>
				</el-table-column>
			</el-table>
		</el-row>

		<el-row class="row">
			<el-col>
				<el-input placeholder="请输入块高" v-model="blockNum" class="input-with-select">
					<el-button
						slot="append"
						icon="el-icon-search"
						@click.native="searchBlock"
						@keydown.enter.native="searchBlock"
					></el-button>
				</el-input>
			</el-col>
		</el-row>
		<el-row class="row" v-if="Object.keys(blockInfo) != 0">
			<el-col>
				<vue-json-pretty :data="blockInfo" />
			</el-col>
		</el-row>
	</div>
</template>

<script>
import { getNodeList, getTransactionTotal, getSearchBlock } from "@/api/monitor/chain"
import { commColor } from "@/api/data"
const nodeStatus = {
	0: "禁用",
	1: "运行",
}
export default {
	name: "FrontDruid",

	data() {
		return {
			nodeList: [],
			transationTotal: {},
			blockInfo: {},
			blockNum: "",
			commColor: commColor,
			nodeStatus: nodeStatus,
		}
	},

	async mounted() {
		this.loading(this, "正在加载区块链监数据!")

		let end1 = await this.getNodeList()
		let end2 = await this.getTransactionTotal()
		if (end1 && end2) {
			this.closeLoading()
		}
	},

	methods: {
		async getNodeList() {
			let res = await getNodeList()
			if (res.code == 200) {
				this.nodeList = res.data
				return true
			}
			return false
		},
		async getTransactionTotal() {
			let res = await getTransactionTotal()
			if (res.code == 200) {
				this.transationTotal = res.data
				return true
			}
			return false
		},
		async searchBlock() {
			if (this.blockNum == "") {
				return
			}
			let res = await getSearchBlock({
				blockId: this.blockNum,
			})
			if (res.code == 200) {
				this.blockInfo = res.data
			}
		},
	},
}
</script>

<style lang="scss" scoped>
.box {
	display: flex;
	align-items: center;
}

.row {
	padding-bottom: 10px;
}

.img {
	width: 150px;
	display: inline-block;
}
.title {
	width: 150px;
	display: inline-block;
	color: white;
	span {
		display: inline-block;
		width: 100%;
	}
	span:nth-child {
		font-weight: bolder;
	}
}

.cb {
	background: linear-gradient(to top right, #47befa, #37eef2);
}

.node {
	background: linear-gradient(to top right, #466dff, #30a7ff);
}

.tx {
	background: linear-gradient(to top right, #736aff, #b287ff);
}
.pend-tx {
	background: linear-gradient(to top right, #ff6e9a, #ffa895);
}
</style>
